import styles from './index.module.scss'
import Button from '@c/button'
import message from '@c/message'
import cm from 'classnames'
import { useState, useRef, useEffect } from 'react'
import { generatePayQrCode } from '@/api/vip'
import QRCode from 'qrcode'
import { goBack } from '@/utils/utils'
import { hashMD5 } from '@/utils/cryptojs'
import Copy from 'clipboard'

const Index = props => {
  const { onClose, pCode, getResult } = props
  const [url, setUrl] = useState('')
  const refQrcode = useRef(null)
  const timer = useRef(null)
  const timerResult = useRef(null)
  const clearResultTimer = () => {
    if (timerResult.current) {
      clearInterval(timerResult.current)
    }
  }

  const clearTimer = () => {
    if (timer.current) {
      clearInterval(timer.current)
    }
  }

  const close = () => {
    if (onClose) {
      onClose()
    } else {
      goBack()
    }
  }

  useEffect(() => {
    toPay()
    const copyUrl = new Copy('.wechat-btn')
    copyUrl.on('success', () => {
      message({ content: '链接复制成功！' })
    })
    return () => {
      clearTimer()
      clearResultTimer()
    }
  }, [])
  const toPay = async () => {
    const res = await generatePayQrCode({
      pCode,
      sign: hashMD5(pCode),
      payWay: 3
    })
    if (res.code === 0) {
      const { url, pollingTotal } = res.data
      try {
        QRCode.toCanvas(refQrcode.current, url)
      } catch (error) {}
      setUrl(url)
      clearTimer()
      clearResultTimer()
      timerResult.current = setInterval(() => {
        getResult(res.data.orderId)
      }, 6000)
      timer.current = setInterval(() => {
        getQrCode()
      }, pollingTotal * 1000)
    } else {
      message({ content: res.msg })
    }
  }

  const saveToLocal = async () => {
    const dataUrl = refQrcode.current.toDataURL('image/png')
    const link = document.createElement('a')
    link.href = dataUrl
    link.download = 'qrcode.png'
    link.click()
  }
  return (
    <div className={cm(styles.wechatPay, 'hideWhenPc')}>
      <div className={styles.title}>
        <img loading="lazy" src="/images/h-ar.png" alt="箭头" onClick={close} />
      </div>
      <p className={styles.p1}>保存下方二维码到相册或复制链接至微信中打开完成支付</p>
      <p className={styles.p2}>（支付完成后权益若未到账请重启星视界）</p>
      <div className={styles.codeBox}>
        <canvas ref={refQrcode} className={styles.qrcode}></canvas>
      </div>
      <div className={styles.btnBox}>
        <Button className={styles.btn} onClick={saveToLocal}>
          保存并扫码二维码
        </Button>
        <Button className={cm(styles.btn, 'wechat-btn')} data-clipboard-text={url}>
          复制链接
        </Button>
      </div>
      <p className={styles.pTitle}>如何在微信打开链接</p>
      <p className={styles.pTips}>1.在微信顶部搜索栏粘贴链接并点击访问</p>
      <img loading="lazy" src="/images/wechat1.webp" className={styles.pImg} alt="微信" />
      <p className={styles.pTips}>2.发送链接给微信好友，并点击消息（建议文件传输助手）</p>
      <img loading="lazy" src="/images/wechat2.webp" className={styles.pImg} alt="微信" />
    </div>
  )
}

export default Index
